<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header">
            <span>{{isEdit?'试题修改':'试题录入'}}</span>
        </div>
        <div>
          <el-form :rules="rules" ref="formData" :model="form" label-width="120px" >
            <!-- 学科 -->
             <el-form-item label="学科:" prop="subjectID">
                <el-select v-model="form.subjectID" placeholder="请选择" @change="changeSubject" @focus="getSubjectList">
                  <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <!-- 目录 -->
             <el-form-item label="目录:" prop="catalogID">
                <el-select v-model="form.catalogID" placeholder="请选择">
                  <el-option v-for="item in directoryList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <!-- 企业 -->
             <el-form-item label="企业:" prop="enterpriseID">
                <el-select v-model="form.enterpriseID" placeholder="请选择" @focus="getDetailList">
                  <el-option v-for="item in detailList" :key="item.id" :label="item.company" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <!-- 城市 -->
              <el-form-item label="城市:" prop="province">
                <el-select v-model="form.province" placeholder="请选择" class="item-city" @change="getCitys" @focus="getProvince">
                  <el-option v-for="(item,index) in province" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                <!-- 区域 -->
                <el-select v-model="form.city" placeholder="请选择" class="item-city">
                  <el-option v-for="(k,i) in citys" :key="i" :label="k" :value="k"></el-option>
                </el-select>
              </el-form-item>
              <!-- 方向 -->
              <el-form-item label="方向:" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option v-for="(item,index) in directionList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <!-- 题型 -->
                <el-form-item label="题型:" prop="questionType">
            <el-radio-group v-model="form.questionType">
              <el-radio
              v-for="item in questionType"
              :key="item.value"
              @change="getQuestionType"
              :label="(item.value).toString()">
              {{item.label}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
              <!-- 难度 -->
              <el-form-item label="难度" prop="difficulty">
                 <el-radio-group v-model="form.difficulty">
                    <el-radio
                      v-for="item in difficulty"
                      :key="item.value"
                      :label="(item.value).toString()">
                      {{item.label}}
                    </el-radio>
                  </el-radio-group>
              </el-form-item>
              <!-- 题干 -->
              <el-form-item label="题干:" prop="question" >
                <quill-editor v-model="form.question" @blur="editQuestion"  style="heigth:200px"/>
              </el-form-item>
              <!-- 选项 -->
              <el-form-item v-if="form.questionType !== '3'" label="选项:" >
                 <div class="selectItem">
                    <!-- 单选 -->
                    <template v-if="form.questionType === '1' ">
                      <el-row  v-for="(item,index) in options" :key="index">
                          <div class="item">
                            <el-radio
                              v-model="isRight"
                              @input="getRight"
                              style="margin-right: 10px"
                              :label="form.options[index].code||wordArr[index]">{{form.options[index].code||wordArr[index]}}:</el-radio>
                            <el-input v-model="form.options[index].title"></el-input>
                            <UploadImg />
                        </div>
                      </el-row>
                        <el-button class="addOption" disabled size="small" type="danger">增加选项与答案</el-button>
                    </template>
                    <!-- 多选 -->
                    <template v-if="form.questionType === '2' ">
                      <el-row  v-for="(item,i) in form.options.length||options" :key="i">
                          <div class="item">
                             <el-checkbox v-model="form.options[i].isRight">{{form.options[i].code=wordArr[i]}}</el-checkbox>
                            <el-input v-model="form.options[i].title"></el-input>
                            <UploadImg />
                          </div>
                        </el-row>
                      <el-button @click="addBtn" class="addOption"  size="small" type="danger">增加选项与答案</el-button>
                    </template>
                  </div>
                  </el-form-item>
                 <!-- 解析视频 -->
              <el-form-item label="解析视频:" >
                <el-input></el-input>
              </el-form-item>
                <!-- 答案解析 -->
              <el-form-item label="答案解析:" prop="answer">
                 <quill-editor v-model="form.answer"  @blur="editAnswer" style="heigth:200px"/>
              </el-form-item>
              <!-- 题目备注 -->
              <el-form-item label="题目备注 :">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.remarks">
                  </el-input>
              </el-form-item>
              <!-- 试题标签 -->
              <el-form-item label="试题标签 :">
                <el-select multiple v-model="form.tags" placeholder="请选择" >
                  <el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <!-- 确认按钮 -->
              <el-form-item>
                <el-button :type="isEdit?'success':'primary'" @click="addSubmit">{{isEdit?'确认修改':'立即创建'}}</el-button>
              </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 上传图片组件
import UploadImg from '../components/uploadImg.vue'

// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys.js'

// 学科列表 API
import { list } from '@/api/hmmm/subjects'

// 导入 createAPI
import { createAPI } from '@/utils/request'

// 导入方向,题型,难度列表
import { direction, difficulty, questionType } from '@/api/hmmm/constants'

// 导入添加 API
import { add, update, detail } from '@/api/hmmm/questions'

// 生成26个字母
const wordArr = []
for (let i = 65; i < 90; i++) {
  wordArr.push(String.fromCharCode(i))
}

export default {
  name: 'TryTyping',

  data () {
    return {
      isEdit: false, // 是否是修改状态
      wordArr, // 字母数组
      isRight: false, // 是否选中
      options: 4,
      questionType, // 题型列表
      difficulty, // 难度列表
      radio: '', // 单选
      multiSelectBoxGroup: [], // 多选框组
      province: [], // 城市列表
      citys: [], // 区域列表
      subjectList: [], // 学科;列表
      directoryList: [], // 目录列表
      detailList: [], // 企业列表
      directionList: direction, // 方向列表
      tagsList: [], // 标签列表
      ifEdit: false, // 是否为修改编辑状态
      form: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        enterpriseID: null, // 企业
        province: '', // 市
        city: '', // 区域
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        // 选项
        options: [
          {
            code: '', // 非必须 代码
            title: '', // 非必须 标题
            img: '', // 非必须 图片URL
            isRight: false // 非必须 是否正确答案
          }, // 非必须 选项
          {
            code: '', // 非必须 代码
            title: '', // 非必须 标题
            img: '', // 非必须 图片URL
            isRight: false // 非必须 是否正确答案
          }, // 非必须 选项
          {
            code: '', // 非必须 代码
            title: '', // 非必须 标题
            img: '', // 非必须 图片URL
            isRight: false // 非必须 是否正确答案
          }, // 非必须 选项
          {
            code: '', // 非必须 代码
            title: '', // 非必须 标题
            img: '', // 非必须 图片URL
            isRight: false // 非必须 是否正确答案
          } // 非必须 选项
        ],
        videoURL: '', // 视频
        answer: '', // 答案解析
        remarks: '', // 题目备注0
        tags: '' // 试题标签
        // isPerfect: false // 是否精选
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        citys: [{ required: true, message: '请选择区域', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'blur' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'blur' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      }
    }
  },

  methods: {
    // 点击确认提交
    addSubmit () {
      this.$refs.formData.validate(async valid => {
        if (!valid) return
        // await add(this.form)
        this.isEdit ? await update(this.form) : await add(this.form)
        this.$message.success(this.isEdit ? '修改成功' : '添加成功')
        // this.$message.success('添加成功')
        this.$refs.formData.resetFields()
        this.$router.push('/questions/list')
      })
    },

    // 题干富文本校验
    editQuestion () {
      this.$refs.formData.validateField('question')
    },

    // 答案解析富文本检验
    editAnswer () {
      this.$refs.formData.validateField('answer')
    },

    // 根据有无 id 进行数据回显
    async detail () {
      if (this.$route.query.id) {
        this.isEdit = true
        const res = await detail({ id: this.$route.query.id })
        this.form = res.data
        // 单选
        if (this.form.questionType === '1') {
          const data = res.data.options.find(item => item.isRight === 1)
          this.isRight = data ? data.code : false
          // 多选
        } else if (this.form.questionType === '2') {
          const data = res.data.options.map(item => {
            if (item.isRight === 1) {
              item.isRight = true
            } else {
              item.isRight = false
            }
            return item
          })
          this.form.options = data
        }
      }
    },

    changeSubject (e) {
      // 获取目录
      this.getCatalog(e)
      this.getTagsList()
    },

    // 获取标签列表
    async getTagsList () {
      const list = data => createAPI('/tags', 'get', data)
      const res = await list({ subjectID: this.form.subjectID })
      this.tagsList = res.data.items
    },

    // 获取到正确的单选选项
    getRight () {
      if (this.isRight === 'A:') {
        this.form.options[0].isRight = true
        this.form.options[1].isRight = false
        this.form.options[2].isRight = false
        this.form.options[3].isRight = false
      } else if (this.isRight === 'B:') {
        this.form.options[1].isRight = true
        this.form.options[0].isRight = false
        this.form.options[2].isRight = false
        this.form.options[3].isRight = false
      } else if (this.isRight === 'C:') {
        this.form.options[2].isRight = true
        this.form.options[0].isRight = false
        this.form.options[1].isRight = false
        this.form.options[3].isRight = false
      } else if (this.isRight === 'D:') {
        this.form.options[3].isRight = true
        this.form.options[0].isRight = false
        this.form.options[2].isRight = false
        this.form.options[1].isRight = false
      }
    },

    // 增加选项
    addBtn () {
      this.options++
      this.form.options.push({
        code: '', // 非必须 代码
        title: '', // 非必须 标题
        img: '', // 非必须 图片URL
        isRight: false // 非必须 是否正确答案
      }) // 非必须 选项)
    },

    // 获取城市列表
    getProvince () {
      this.province = provinces()
    },

    // 获取区域列表
    getCitys (e) {
      this.citys = citys(e)
    },

    // 获取学科列表
    async  getSubjectList () {
      const res = await list({ pagesize: 100 })
      this.subjectList = res.data.items
      this.directoryList = []
    },

    // 获取目录列表
    async getCatalog (e) {
      const list = data => createAPI('/directorys', 'get', data)
      const res = await list({ subjectID: e })
      this.directoryList = res.data.items
    },

    // 获取企业列表
    async getDetailList () {
      const list = data => createAPI('/companys', 'get', data)
      const res = await list({ pagesize: 100 })
      this.detailList = res.data.items
    },

    // 获取到最新的选项
    getQuestionType (val) {
      this.form.options = this.form.options.map(item => {
        item.isRight = false
        return item
      })
      this.isRight = false
    }
  },

  created () {
    // 回显数据
    this.detail()
  },

  components: {
    // 富文本组件
    quillEditor,
    // 上传图片组件
    UploadImg
  }
}
</script>

<style  lang="scss" scoped>
el-form-item{
   line-height: 40px;
}
.el-select--medium{
  width: 400px;
}
.item-city {
  width: 198px;
  &:first-child {
    margin-right: 4px;
  }
}
  ::v-deep .ql-container {
    height: 200px;
  }
  .el-input--medium{
    width: 400px;
  }
  .selectItem{
  width: 400px;
  line-height: 36px;
 .item {
   display: none;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
 }
el-input{
  width: 400px;
}
}

</style>
